<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src= "app.js"></script>
<body>

<div class="container-fluid" ng-app="myApp" ng-controller="TaskController as taskCtrl">
<h1>Tasks</h1> 
<div>
<button class="btn btn-success" ng-click="reload()"><span class="glyphicon glyphicon-refresh"></span> Reload</button>
<button class="btn btn-success" ng-click="newTask()"><span class="glyphicon glyphicon-plus"></span> New Task</button>
</div>
<table class="table table-striped">
<thead>
  <tr>
    <th>Edit</th>
    <th>Id</th>
    <th>Title</th>
    <th>Description</th>
  </tr>
</thead>
<tobdy>
  <tr ng-repeat="t in tasks">
    <td><span class="glyphicon glyphicon-remove" ng-click="delete(t.id)"></span> <span class="glyphicon glyphicon-pencil" ng-click="select($index)"></span></td>
    <td>{{t.id}}</td>
    <td>{{t.title}}</td>
    <td>{{t.description}}</td>
  </tr>
</tbody>
</table>

<h2>Task</h2>

<form class="form-horizontal" novalidate>
  <div class="form-group">
    <label class="col-sm-1 control-label">Id:</label>
    <div class="col-sm-10">
    <input type="text" ng-model="task.id">
    </div>
  </div> 
  <div class="form-group">
    <label class="col-sm-1 control-label">Title:</label>
    <div class="col-sm-10">
    <input type="text" ng-model="task.title">
    </div>
  </div> 
  <div class="form-group">
    <label class="col-sm-1 control-label">Description:</label>
    <div class="col-sm-10">
    <input type="text" ng-model="task.description">
    </div>
  </div> 
  <div class="form-group">
<label class="col-sm-1 control-label"></label>
  <div class="col-sm-10">
  <button class="btn btn-success" ng-click="put()"><span class="glyphicon glyphicon-save"></span> Save</button>
  </div>
  </div>
</form>

</div>

</body>
</html>
